<template>
  <div class="disk-info">
    <el-card v-loading="loading">
      <div class="tab-header">
        <span>磁盘信息</span>
        <el-icon class="refresh-icon" @click="refresh">
          <Refresh />
        </el-icon>
      </div>
      <el-table :data="info" border stripe>
        <el-table-column prop="drive" label="盘符" />
        <el-table-column prop="label" label="卷标" />
        <el-table-column prop="file_system" label="文件系统" />
        <el-table-column prop="size" label="总容量" />
        <el-table-column prop="free_space" label="可用空间" />
        <el-table-column prop="used_space" label="已用空间" />
        <el-table-column prop="usage" label="使用率">
          <template #default="{ row }">
            <el-progress :percentage="parseFloat(row.usage)" :format="percentageFormat" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { getDiskInfo } from '/@/api/monitor'

const info = ref([] as any[])
const loading = ref(false)

const percentageFormat = (percentage: number): string => `${percentage}%`

const refresh = async () => {
  try {
    loading.value = true
    const { data } = await getDiskInfo()
    info.value = data.disks
  } finally {
    loading.value = false
  }
}

defineExpose({
  refresh
})
</script>

<style lang="scss" scoped>
@import '../styles/common.scss';
</style> 